<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>发布会议</title>
    <style>
        /*这个是这页面特有的，需要单独写出来*/
        .myTitle > input {
            float: right;
            margin-left: 15px;
        }

    </style>
</head>
<body>
<jsp:include page="/incloud/header.jsp"/>

<div class="d-flex align-items-stretch">
    <!-- Sidebar Navigation-->
    <jsp:include page="/incloud/sidebar.jsp"/>
    <!-- Sidebar Navigation end-->
    <div class="page-content">
        <div class="page-header">
            <div class="container-fluid">
                <h2 class="h5 no-margin-bottom">发布会议</h2>
            </div>
        </div>

        <section class="no-padding-bottom">

            <div class="block-body">
                <form action="/meeting/doMeetingAdd" method="post">
                    <div class="form-group">
                        <label class="form-control-label">标题</label>
                        <input type="text" placeholder="会议标题" name="title" class="form-control">
                    </div>
                    <input type="hidden" name="deptName"/>
                    <!--选择部门-->
                    <div class="form-group">
                        <label class="form-control-label">部门：</label>
                        <select class="selectpicker" data-live-search="true" name="deptId" id="depts">

                        </select>
                        <label class="form-control-label">抄送人：</label>
                        <select class="selectpicker" data-live-search="true" name="makeUser" multiple id="users">

                        </select>
                    </div>
                    <!--开始时间-->
                    <div class="form-group">
                        <label class="form-control-label">开始时间</label>

                        <input type="text" class="form-control" id="datetimepicker" name="startTime" data-date-format="yyyy-mm-dd hh:ii:ss">
                        <script>
                            $(function () {
                                $('#datetimepicker').datetimepicker();
                            })
                        </script>

                    </div>
                    <!--结束时间-->
                    <div class="form-group">
                        <label class="form-control-label">结束时间</label>

                        <input type="text" class="form-control" name="endTime" id="endTime"
                               data-date-format="yyyy-mm-dd hh:ii:ss">
                    </div>

                    <script>
                        $(function () {
                            // 初始化日期选择框
                            $('#endTime').datetimepicker();
                        })
                    </script>
                    <div class="form-group">
                        <label class="form-control-label">会议内容</label>
                        <textarea class="form-control" rows="5" name="content"></textarea>
                    </div>
                    <div class="text-center form-group">
                        <input type="submit" value="发布" class="btn btn-primary">
                        <input type="reset" value="清空" class="btn btn-info">
                    </div>
                </form>
            </div>
        </section>
        <jsp:include page="/incloud/footer.jsp"/>
    </div>
</div>


</body>
<script>
    $("#avatar").click(function () {
        location.href = "/user/detail?id=${loginUser.id}";
    })
   function init(deptId) {
       $.ajax({
           url:"/meeting/toMeetingAdd",
           data:{
               deptId:deptId
           },
           type:"post",
           success:function (data) {
               var depts = $("#depts");
               var users = $("#users");
               var deptList = data[0];
               var userList = data[1];
               var deptId = data[2];
               //设置部门下拉框默认值
               depts.html(deptList[deptId].name);
               //设置部门名默认值
               $("[name=deptName]").val(deptList[deptId].name)
               //ajax首次加载部门列表
               $.each(deptList,function (index,item) {
                   if(item.id == deptId){
                       var option = $("<option selected value='"+item.id+"'>"+item.name+"</option>");
                   }else{
                       var option = $("<option value='"+item.id+"'>"+item.name+"</option>");
                   }

                   depts.append(option);
                   depts.selectpicker('refresh');
               })
               //ajax首次加载部门员工列表
               $.each(userList,function (index,item) {
                   var option = $("<option value='"+item.id+"'>"+item.realName+"</option>");
                   users.append(option);
                   users.selectpicker('refresh');
               })
               //异步刷新部门员工列表
               depts.change(function () {
                   var deptId = depts.val();
                   $("[name=deptName]").val(deptList[deptId].name)
                   depts.empty();
                   users.empty();
                   users.selectpicker('refresh');
                   init(deptId);
               })

               //提交表单
               $("form").submit(function () {
                   var title = $("[name=title]").val();
                   var content = $("[name=content]").val();
                   var makeUser = $("[name=makeUser]").val();
                   var startTime = $("[name=startTime]").val();
                   var endTime = $("[name=endTime]").val();
                   if(title == ""){
                       layer.msg("请输入会议标题");
                       return false;
                   }
                   if(makeUser == ""){
                       layer.msg("请选择会议参加人员");
                       return false;
                   }
                   if(content == ""){
                       layer.msg("请输入会议内容");
                       return false;
                   }
                   if(endTime == ""){
                       layer.msg("请输入会议起始时间");
                       return false;
                   }
                   if(startTime == ""){
                       layer.msg("请输入会议结束时间");
                       return false;
                   }
                   return true;
               })
           }
       })
   }
   init(0);

</script>
</html>